<template>
  <li class="video-player">
      <div class="marquee-panel">

      </div>
      <video :src="videoUrl" controls></video>
      <div class="sub-toolbar">
          <div class="sub-left">
              avatar
              <details>
             <summary>.</summary>
             <p>All pages and graphics on this web site are the property of W3School.</p>
             </details>
          </div>
          <ul class="sub-right">
              <li><v-icon color="#fff">
                  mdi-arrow-left
              </v-icon></li>
              <li><v-icon color="#fff">
                  mdi-arrow-left
              </v-icon></li>
              <li><v-icon color="#fff">
                  mdi-arrow-left
              </v-icon></li>
              <li><v-icon color="#fff">
                  mdi-arrow-left
              </v-icon></li>
          </ul>
          <div class="bottom-control" >

          </div>
      </div>
  </li>
</template>

<script>
import api from '@/api'
export default {
    props: {
        mvid: {
            default: ''
        },
        index: {
            type: Number
        },
        src:{
            type: String,
            require: true
        },
        width: {
            type: String
        },
        height: {
            type: String
        }
    },
    watch: {
        mvid: {
            handler(n,o){
                if(n !== o)
                    this.getSrc(n)
            },
            immediate:true
        }
    },
    data(){
        return {
            videoUrl: ''
        }
    },
    methods: {
        getSrc(id){
            if(!id) return;
            api.getMvSrc(id).then(res => {
                console.log(res);
                let data = res.data.data;
                this.videoUrl = data.url
            })  
        }
    }
}
</script>

<style lang="scss" scoped>
    @import '@/assets/styles/global.scss';

    .video-player {
        color: #fff;
        .marquee-panel {
            height: 30vh;
        }

        video {
            width: 100%;
            height: 30vh;
        }

        .sub-toolbar {
            height: 40vh;
            position: relative;
            @include spaceBetween;
            align-items: flex-end;
            padding-bottom: px2rem(60);
            box-sizing: border-box;
            .sub-left {
                
            }

            .sub-right {

            }

            .bottom-control {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: px2rem(60);
                background-color: rgba(255,255,255,.2);
            }

        }   
    }
</style>